<div class="card">
  <div class="remove-when-use">
    <label>Hover over me to show details</label>
  </div>
  <div class="details">
    <label>Title</label>
    <p>
      A beautiful place at the shore of XYZ sea.
      <br>
      <i>California, USA</i>
    </p>
  </div>
</div>
<style>
/* From Uiverse.io by imPradhyumn - Tags: card, transition, hover slide, card hover, 3d card */
.card {
  width: 190px;
  height: 254px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  position: relative;
}

.remove-when-use {
  text-align: center;
  width: 100%;
  position: absolute;
  color: black;
  top: 85px;
  font-weight: bold;
}

.details > p {
  font-size: .8em;
  margin-top: .5em;
}

.details > label {
  font-weight: bold;
}

.details {
  color: white;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  height: 2.6em;
  transition: height .5s ease-in-out;
  padding: 0.6em;
  overflow: hidden;
}

.card:hover > .details {
  height: 6.7em;
}


</style>
